<template>
  <div class="bar">
    <div class="right">
      <t-button theme="primary" @click="createStore.enterOrder()">
        <template #icon><t-icon name="add" /></template>
        {{ $t('common.create') }}
      </t-button>
      <Excel />
    </div>
    <div class="title">{{ plugin.t('nav.order') }}</div>
  </div>
  <div class="bg-box">
    <t-button shape="square" variant="outline" @click="orderStore.get" style="float: right">
      <template #icon>
        <t-icon name="refresh" />
      </template>
    </t-button>
    <t-form layout="inline" style="margin-bottom: 20px">
      <t-form-item label-width="0">
        <t-select v-model="where.ticket" @change="orderStore.reset(1)" style="width: 200px; margin-right: 10px">
          <t-option value="print" :label="plugin.t('order.ticket_text.print')" />
          <t-option value="print_refund" :label="plugin.t('order.ticket_text.print_refund')" />
          <t-option value="ticket" :label="plugin.t('order.ticket_text.ticket')" />
          <t-option value="ticket_refund" :label="plugin.t('order.ticket_text.ticket_refund')" />
        </t-select>
        <t-select v-model="orderStore.where.key" style="width: 200px; margin-right: 10px">
          <t-option value="code" :label="plugin.t('order.code')" />
          <t-option value="client_name" :label="plugin.t('order.client_name')" />
        </t-select>
        <t-input v-model="orderStore.where.value" style="width: 200px; margin-right: 10px">
          <template #prefix-icon>
            <t-icon name="search" />
          </template>
        </t-input>
        <Daterange type="time" v-model="orderStore.where.time" style="width: 250px" />
      </t-form-item>
      <t-form-item label-width="0">
        <t-button theme="default" @click="orderStore.reset(1)">{{ $t('common.search') }}</t-button>
      </t-form-item>
    </t-form>
    <Table @retreat="onRetreat" @info="onInfo" @copy="onCopy" @view="onView" @outbound="onOutbound" />
    <Info ref="info" />
    <PdfView ref="pdf" />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import createStore from '../create/store'
  import orderStore from '../../store'
  import Table from './table.vue'
  import PdfView from '../../components/pdfview.vue'
  import Info from './info/index.vue'
  import Excel from './excel.vue'
  import outboundCreateStore from '@/plugin/goods/views/outbound/create/store'
  import Daterange from '@/components/daterange.vue'

  const plugin = index.plugin
  const where = orderStore.data

  const info = ref()
  const pdf = ref()

  const onInfo = data => {
    info.value.open(data)
  }

  const onView = data => {
    pdf.value.open(data, null, data.code)
  }

  const onCopy = async (data) => {
    await createStore.enterOrder(data)
  }

  const onRetreat = async (data) => {
    await createStore.enterOrder(data, true)
  }

  const onOutbound = data => {
    outboundCreateStore.init(data, () => {
      orderStore.outbound(data.id)
    })
    app.router.push('/plugin/goods/outbound/create')
  }
</script>